<template>
	<view v-if="hotelInfo">
		<!-- 主体 -->
		<view class="page hotel-detail">
			<!-- 大图 -->
			<view class="picture bg-cover" :style="{backgroundImage: 'url(' + (imgPath + hotelInfo.img) + ')'}">
				<view class="images flex-row-center" @click="goNext('/pages/hotel/picture?hotelId=' + hotelInfo.id)">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-image.png"></image>
					<text class="font11 font-ffffff">{{hotelInfo.images ? hotelInfo.images.length : 0}}张</text>
				</view>
			</view>
			<!-- 评论 -->
			<view class="information">
				<view class="name font15">{{hotelInfo.name}}</view>
				<view class="flex-row-between">
					<view class="left flex-row-start">
						<text class="font16">{{hotelInfo.score}}</text>
						<text class="font14">分</text>
						<uni-rate class="rate" :value="hotelInfo.score" :is-fill="false" :disabled="true" margin="5" disabledColor="#ff6428" activeColor="#ff6428" color="#ff6428" size="12" />
					</view>
					<view class="right flex-row-center" @tap="openTel">
						<image class="tel" src="https://static.newbeaconhotels.com/app/hotel/icon-tel.png"></image>
					</view>
				</view>
			</view>
			<!-- 地址 -->
			<view class="address flex-row-between">
				<view class="left">
					<view class="font14">{{hotelInfo.addrd}}</view>
					<!-- <view v-if="distance(hotelInfo.lat, hotelInfo.lon) >= 0" class="font13 font-969696">距您{{distance(hotelInfo.lat, hotelInfo.lon)}}km</view> -->
				</view>
				<view class="right flex-row-end" @click="openLocation">
					<view class="font14 font-link">地图</view>
					<uni-icons class="icons font-b" type="arrowright" size="12" color="#cccccc"></uni-icons>
				</view>
			</view>
			<view class="hr7"></view>
			<!-- 日期选择 -->
			<view class="date-box flex-row-between font13" @tap="openCalendar">
				<view class="flex-row-start">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-date.png"></image>
					<uni-dateformat class="format" :date="calendar.startDate" format="MM月dd日"></uni-dateformat>
					<view>-</view>
					<uni-dateformat class="format" :date="calendar.endDate" format="MM月dd日"></uni-dateformat>
					<view class="tag">入住 {{calendar.dayCount}}晚</view>
				</view>
				<uni-icons class="icons" type="arrowright" size="12" color="#535353"></uni-icons>
			</view>
			<view class="hr7"></view>
			<!-- 房间列表 -->
			<view class="box-goods">
				<view class="item-box">
					<view class="item flex-row-between" v-for="(item, index) in roomList" :key="index">
						<view class="image bg-cover" :style="{backgroundImage: 'url(' + (imgPath + item.basic.img) + ')'}"></view>
						<view class="name font15 ellipsis">{{item.basic.name}}</view>
						<button class="btn tc" @click.stop="goOrder(item.basic.id, item.basic.name)">
							<text class="font14 font-ffffff">预订</text>
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 日历组件 -->
		<JCalendar ref="calendar" :themeColor="themeColor" mode="2" :startDate="calendar.startDate" :endDate="calendar.endDate" :dayCount="calendar.dayCount" @callback="bookCalendar"></JCalendar>
		
		<!-- 联系客服 -->
		<bottomPopup ref="tel" title="联系客服">
			<view v-if="hotelInfo.contact" class="contact-box">
				<view class="item flex-row-between" @tap="makePhone(hotelInfo.contact.group)">
					<view>客服热线</view>
					<view>{{hotelInfo.contact.group}}</view>
				</view>
				<view class="item flex-row-between" @tap="makePhone(hotelInfo.contact.hotel)">
					<view>酒店客服</view>
					<view>{{hotelInfo.contact.hotel}}</view>
				</view>
			</view>
		</bottomPopup>
	</view>
</template>

<script>
	import JCalendar from '@/components/j-calendar/index.vue';
	import bottomPopup from "@/components/j-bottomPopup/index.vue";
	export default {
		components: { JCalendar, bottomPopup },
		data() {
			return {
				themeColor: '#03004c',
				imgPath: this.$Config.http_static, // 图片头
				// 日历
				calendar: {
					startDate: '', // 默认入住日期
					endDate: '', // 默认离店日期
					dayCount: '1'
				},
				hotelInfo: {}, // 酒店详情
				roomList: [], // 房型列表
			}
		},
		onLoad (options) {
			// 从缓存中拿取查询条件
			let JsonData = uni.getStorageSync('hotelQuery')
			if (JsonData) {
				if (JsonData.calendar) {
					this.calendar = JsonData.calendar
				}
			}
			
			// 酒店详情
			this.$Http({
				url: 'hotelInfo',
				load: true,
				data: {
					id: options.id,
					type: 'short',
				},
			}).then(res => {
				if (res.code == 1) {
					/*酒店信息*/
					this.hotelInfo = res.data
					
					/*获取酒店房型列表*/
					this.getRoom()
				}
			});
		},
		methods: {
			// 获取酒店房型列表
			getRoom () {
				this.$Http({
					url: 'ownerRoom',
					token: uni.getStorageSync('token') ? true : false,
					data: {
						hotel_id: this.hotelInfo.id,
						data: this.$base.formatTime(new Date(this.calendar.startDate), "yyyy-MM-dd"),
						dayCount: this.calendar.dayCount
					}
				}).then(res1 => {
					if(res1.code == 1) {
						this.roomList = res1.data.data
					}
				});
			},
			// 打开日历
			openCalendar () {
				this.$refs.calendar.openCalendar()
			},
			// 选择日历
			bookCalendar (date) {
				console.log('酒店详情选择的日期' + JSON.stringify(date))
				let hotelQuery = {
					calendar: date
				}
				uni.setStorage({key: 'hotelQuery', data: hotelQuery})
				this.calendar = date
				
				/*获取酒店房型列表*/
				this.getRoom()
			},
			// 打开客服
			openTel () {
				this.$refs.tel.Onopen()
			},
			// 拨打电话
			makePhone (tel) {
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			},
			// 打开定位导航
			openLocation () {
				uni.openLocation({
					name: this.hotelInfo.name,
					latitude: parseFloat(this.hotelInfo.lat),
					longitude: parseFloat(this.hotelInfo.lon),
					success: function () {
						console.log('success');
					}
				});
			},
			// 去预订
			goOrder (id, name) {
				/*获取用户信息*/
				this.$Http({
					url: 'user',
					token: true
				}).then(res => {
					if (res.code == 1) {
						let bookQuery = {
							hotel_id: this.hotelInfo.id,
							calendar: this.calendar,
							room_id: id,
							room_name: name
						}
						uni.setStorage({key: 'bookQuery', data: bookQuery})
						
						// #ifdef MP-WEIXIN
						uni.navigateTo({ url: '/pages/owner/hotelBook' });
						// #endif
						
						// #ifdef H5
						uni.setStorage({ key: 'firstType', data: true })
						window.location.href = this.$Config.http_h5_url + '/pages/owner/hotelBook'
						// #endif
					}
				});
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("../home/goods.less");
	@import url("../hotel/style.less");
	@import url("style.less");
</style>
